<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>慕慕手记首页</title>
		<!-- 初始化样式 -->
		<link rel="stylesheet" href="../../plugins/bootstrap/css/bootstrap.min.css">
		<link rel="stylesheet" href="css/base.css">
		<link rel="stylesheet" href="css/index.css">
		<link rel="stylesheet" href="css/login.css">
		<script type="text/javascript" src="../../plugins/bootstrap/js/bootstrap.min.js"></script>
		
	</head>
	<body>
		<div class="header">
			<div class="header-container clearfix">
				<div class="header-left fl">
					<span><a href="">慕课网首页</a></span>
					<span><a href="">免费课</a></span>
					<span><a href="">实战课</a></span>
					<span>
						<a href="">体系课</a>
						<img src="images/new.png" alt="">
					</span>
					<span><a href="">慕课教程</a></span>
					<span><a href="">专栏</a></span>
					<span><a href="">手记</a></span>
					<span>
						<a href="">企业服务</a>
						<img src="images/new.png" alt="">
					</span>
				</div>
				<div class="header-right fr">
					<span>
						<i class="iconfont">&#xe60d;</i>
					</span>
					<span>
						<i class="iconfont">&#xe73c;</i>
					</span>
					<span class="login">
						<span data-bs-toggle="modal" data-bs-target="#exampleModal"><a href="#">登录</a></span>
						<span>/</span>
						<span data-bs-toggle="modal" data-bs-target="#regModal"><a href="#">注册</a></span>
					</span>
					
				</div>
			</div>
			</div>
		<div class="sub-header clearfix">
			<div class="sub-header-container">
				<div class="sub-header-left fl">
					<img src="images/article-logo.png" alt="">
					<img src="images/article-desc.png" alt="">
				</div>
				<div class="sub-header-right fr clearfix">
						<input type="text" class="fl" placeholder="搜索感兴趣的知识和文章">
						<span class="iconfont fl">&#xe60d;</span>
					
					
					<button class="fl">写文章</button>
				</div>
			</div>
			
			</div>
			<div class="article-container clearfix">
				<div class="left-menu fl">
					<div class="selected"><a href="">推荐</a></div>
					<div><a href="">自动化测试</a></div>
					<div><a href="">Python开发</a></div>
					<div><a href="">Java开发</a></div>
					<div><a href="">功能测试</a></div>
					<div><a href="">性能测试</a></div>
					<div><a href="">幽默段子</a></div>
				</div>
				<div class="article-warpper fl">
					<div class="article-inner">
						<div class="article-row clearfix">
							<div class="article-header-image fl">
								<img src="images/article-header.jpg" alt="">
							</div>
							<div class="article-desc fl">
								<div class="article-name">「讲师分享」一图读懂什么是研发效能</div>
								<div class="article-info clearfix">
									<article class="article-left fl">
										<span>资讯</span>
										<span class="iconfont">19235</span>
										<span>慕课网官方_运营中心</span>
										<span>资讯</span>
									</article>
									<div class="article-right fr">08.09</div>
								</div>
							</div>
						</div>
						<div class="article-row clearfix">
							<div class="article-header-image fl">
								<img src="images/article-header.jpg" alt="">
							</div>
							<div class="article-desc fl">
								<div class="article-name">「讲师分享」一图读懂什么是研发效能</div>
								<div class="article-info clearfix">
									<article class="article-left fl">
										<span>资讯</span>
										<span class="iconfont">19235</span>
										<span>慕课网官方_运营中心</span>
										<span>资讯</span>
									</article>
									<div class="article-right fr">08.09</div>
								</div>
							</div>
						</div>
						<div class="article-row clearfix">
							<div class="article-header-image fl">
								<img src="images/article-header.jpg" alt="">
							</div>
							<div class="article-desc fl">
								<div class="article-name">「讲师分享」一图读懂什么是研发效能</div>
								<div class="article-info clearfix">
									<article class="article-left fl">
										<span>资讯</span>
										<span class="iconfont">19235</span>
										<span>慕课网官方_运营中心</span>
										<span>资讯</span>
									</article>
									<div class="article-right fr">08.09</div>
								</div>
							</div>
						</div>
						<div class="article-row clearfix">
							<div class="article-header-image fl">
								<img src="images/article-header.jpg" alt="">
							</div>
							<div class="article-desc fl">
								<div class="article-name">「讲师分享」一图读懂什么是研发效能</div>
								<div class="article-info clearfix">
									<article class="article-left fl">
										<span>资讯</span>
										<span class="iconfont">19235</span>
										<span>慕课网官方_运营中心</span>
										<span>资讯</span>
									</article>
									<div class="article-right fr">08.09</div>
								</div>
							</div>
						</div>
						<div class="article-row clearfix">
							<div class="article-header-image fl">
								<img src="images/article-header.jpg" alt="">
							</div>
							<div class="article-desc fl">
								<div class="article-name">「讲师分享」一图读懂什么是研发效能</div>
								<div class="article-info clearfix">
									<article class="article-left fl">
										<span>资讯</span>
										<span class="iconfont">19235</span>
										<span>慕课网官方_运营中心</span>
										<span>资讯</span>
									</article>
									<div class="article-right fr">08.09</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		<!-- 这个是登录的模态框 -->
		<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
		  <div class="modal-dialog">
		    <div class="modal-content">
		      <div class="modal-header">
		        <h1 class="modal-title fs-5" id="exampleModalLabel">用户登录</h1>
		        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
		      </div>
		      <div class="modal-body">
		        <form>
		          <div class="mb-3">
		            <input type="text" class="form-control" id="recipient-name" placeholder="请输入您的邮箱">
		          </div>
		          <div class="mb-3">
						<input type="password" class="form-control" id="recipient-name" placeholder="请输入您的密码">
		          </div>
				  <div class="mb-3">
					  <img src="images/code.png" alt="" class="auto-code-image">
				  	  <input type="text" class="auth-code" placeholder="请输入验证码">
				  </div>
				  
				  <button type="button" class="btn btn-primary login-button">登录</button>
		        </form>
		      </div>
		      <div class="modal-footer">
				  <span class="register" data-bs-dismiss="modal" data-bs-toggle="modal" data-bs-target="#regModal">注册</span>
				<!--  
		        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
		        <button type="button" class="btn btn-primary">Send message</button>
		      -->
			  </div>
		    </div>
		  </div>
		</div>
		
		<!-- 这是注册的模态框 -->
		
		<div class="modal fade" id="regModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
		  <div class="modal-dialog">
		    <div class="modal-content">
		      <div class="modal-header">
		        <h1 class="modal-title fs-5" id="exampleModalLabel">用户注册</h1>
		        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
		      </div>
		      <div class="modal-body">
		        <form>
		          <div class="mb-3">
		            <input type="text" class="form-control" id="recipient-name" placeholder="请输入您的邮箱">
		          </div>
		          <div class="mb-3">
						<input type="password" class="form-control" id="recipient-name" placeholder="请输入您的密码">
		          </div>
				  <div class="mb-3">
						<input type="password" class="form-control" id="recipient-name" placeholder="请再次输入您的密码">
				  </div>
				  <div class="mb-3">
				  	  <input type="text" class="auth-code" placeholder="请输入验证码">
					  <button class="send">发送</button>
				  </div>
				  
				  <button type="button" class="btn btn-primary login-button">注册</button>
		        </form>
		      </div>
		      <div class="modal-footer">
				  <span class="register" data-bs-dismiss="modal" data-bs-toggle="modal" data-bs-target="#exampleModal">登录</span>
		    <!--    
				<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
		        <button type="button" class="btn btn-primary">Send message</button>
		      -->
			  </div>
		    </div>
		  </div>
		</div>
	</body>
</html>